    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="box">
            <p>第一个p标签</p>
            <p>第二个p标签</p>
            <p>第三个p标签</p>
        </div>



        <script>
            var p = document.querySelectorAll('p')[1];
            HTMLElement.prototype.next = nextElementSibling;
            HTMLElement.prototype.prev = previousElementSibling;
            HTMLElement.prototype.firstEleChild = firstElementChild;
            HTMLElement.prototype.lastEleChild = lastElementChild;

            console.log(p.next());
            console.log(p.prev());
            console.log(document.querySelector('.box').firstEleChild());
            console.log(document.querySelector('.box').lastEleChild());

            //上一个元素节点
            function nextElementSibling(){
                if(this.nextElementSibling){
                    return this.nextElementSibling;
                }else {
                    var next = this.nextSibling;
                    //如果有下一个节点且下一个节点不是元素节点
                    while(next && next.nodeType !== 1){
                        //继续对下一个节点的下一个节点判断
                        next = next.nextSibling;
                    }
                    return next;
                }
            }
            //下一个元素节点
            function previousElementSibling(){
                if(this.previousElementSibling){
                    return this.previousElementSibling
                }else {
                    var prev = this.previousSibling;
                    //如果有上一个节点，且上一个节点不是元素节点
                    while(prev && prev.nodeType !== 1){
                        //就继续对上一个节点的上一个节点进行判断
                        prev = prev.previousSibling;
                    }
                    return prev;
                }
            }
            //第一个子元素
            function firstElementChild(){
                if(this.firstElementChild){
                    return this.firstElementChild;
                }else {
                    var first = this.firstChild;
                    //如果第一个不是元素节点  就判断当前节点的下一个节点
                    while(first && first.nodeType !==1){
                        first = first.nextSibling;
                    }
                    return first;
                }
            }

            //最后一个子元素
            
            function lastElementChild(){
                if(this.lastElementChild){
                    return this.lastElementChild;
                }else {
                    var last = this.lastChild;
                    //如果最后一个节点不是元素节点，就判断当前节点的上一个节点
                    while(last && last.nodeType !==1){
                        last = last.previousSibling;
                    }
                    return last;
                }
            }
        </script>
    </body>
    </html>